<template>
  <div class="w-full h-full beijingtupian flex justify-center items-start overflow-y-auto overflow-x-hidden">
    <n-spin :show="loading" class="w-3/10 juzhong">
      <div class="mt-100px bg-gray-400 bg-opacity-80 p-5 flex justify-center items-center flex-col w-full rounded">
        <n-steps :current="current" :status="currentStatus">
          <n-step
              title="输入账号"
          />
          <n-step
              title="输入收到的验证码"
          />
          <n-step
              title="输入新密码"
          />
        </n-steps>
        <div class="w-full h-5"></div>
        <n-form :model="model" ref="formRef" label-placement="left"
                :label-width="48" :rules="rules" class="w-full flex flex-col justify-center items-center">
          <n-form-item path="username" class="w-full" v-if="current===1">
            <n-input v-model:value="model.username" placeholder="请输入帐号" @keydown.enter.prevent/>
          </n-form-item>
          <n-form-item path="username" class="w-full" v-if="current===2">
            <n-input v-model:value="model.code" placeholder="请输入验证码" @keydown.enter.prevent/>
          </n-form-item>
          <n-form-item path="password" class="w-full" v-if="current===3">
            <n-input
                placeholder="请输新入密码"
                v-model:value="model.password1"
                type="password"
            />
          </n-form-item>
          <n-form-item path="password" class="w-full" v-if="current===3">
            <n-input
                placeholder="请再次输入新密码"
                v-model:value="model.password2"
                type="password"
            />
          </n-form-item>
          <div class="w-full juzhong">
            <n-button v-if="current===1" type="info" @click="checkusername()">下一步</n-button>
            <n-button v-if="current===2" type="info" @click="checkcode()">下一步</n-button>
            <n-button v-if="current===3" type="info" @click="finishreset()">确定</n-button>
          </div>
        </n-form>
      </div>
    </n-spin>
  </div>
</template>

<script>
import {defineComponent, nextTick, ref} from "vue"
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {NButton, NForm, NRow, NCol, NFormItem, NInput, NCheckbox, useMessage, NStep, NSteps, NSpin} from "naive-ui"

export default defineComponent({
  name: 'resetpasswd',//组件名称
  props: {
    //接收父组件数据
  },
  components: {
    NButton, NForm, NRow, NCol, NFormItem, NInput, NCheckbox, NStep, NSteps, NSpin,
  },
  setup(prop, content) {
    const store = useStore()
    const route = useRoute()
    const router = useRouter()
    const formRef = ref(null)
    const current = ref(1)
    const currentStatus = ref("process")
    const message = useMessage()
    const loading = ref(false)
    const model = ref({})
    const rules = ref({
      username: [
        {required: true, message: '请输入帐号', trigger: ['input', 'blur']},
      ],
      code: [
        {required: true, message: '请输入收到的验证码', trigger: ['input', 'blur']},
      ],
      password1: [
        {required: true, message: '请输入密码', trigger: ['input', 'blur']},
      ],
      password2: [
        {required: true, message: '请再次输入密码', trigger: ['input', 'blur']},
      ],
    })
    // 校验帐号
    const checkusername = () => {
      formRef.value.validate(error => {
        if (error) {
          return false
        } else {
          currentStatus.value = "finish"
          current.value = 2
          nextTick(() => {
            currentStatus.value = "process"
          })
        }
      })
    }
    const checkcode = () => {
      formRef.value.validate(error => {
        if (error) {
          return false
        } else {
          currentStatus.value = "finish"
          current.value = 3
          nextTick(() => {
            currentStatus.value = "process"
          })
        }
      })
    }
    const finishreset = () => {
      formRef.value.validate(error => {
        if (error) {
          return false
        } else {
          // loading.value = true
          // setTimeout(() => {
          //   loading.value = false
          //   currentStatus.value = "finish"
          //   message.success("你不会真以为密码修改成功了吧")
          //   router.push("/login")
          // }, 3000)
          currentStatus.value = "finish"
          message.success("你不会真以为密码修改成功了吧")
          router.push("/login")
        }
      })
    }
    return {
      model, rules, current, currentStatus, formRef, checkusername, checkcode, finishreset, loading,
    }
  }
})

</script>

<style scoped>

</style>
